import React,{ useState ,useEffect} from 'react'
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';
import './index.css'
import {Modal, Spin,Button,Form,Upload} from 'antd';
import { useHistory } from 'react-router-dom';


const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

  function App(){
    const [loading, setLoading] = useState(false);
    const [kronaList, setKronaList] = useState([]);
    const [cachedData, setCachedData] = useState('');
    const history = useHistory();
    const [isModalOpen, setIsModalOpen] = useState(false); 
    const showModal = () => {
      setIsModalOpen(true);
    };
    const handleOk = () => {
      setIsModalOpen(false);
    };
    const handleCancel = () => {
      setIsModalOpen(false);
    };
    
    const normFile = (e) => {
      console.log('Upload event:', e);
      if (Array.isArray(e)) {
        return e;
      }
      return e?.fileList;
    };
    const onFinish = (values) => {
      if(values.dragger==undefined){
        alert('please input file！')
        return
      }
      setLoading(true);      
      const file = values.dragger[0].originFileObj
      let data =new FormData()
      data.append("file",file) 
      axios({
        headers: {
          'Content-Type':'application/json'
        },
          method: 'post',
          url:`http://127.0.0.1:5000/index/upload`,
          data: data,
        }).then(res => {
          setLoading(false);
          setIsModalOpen(false);
          if(res && res.status === 200){
            console.log(res)
            const element = document.createElement("a");
            const file = new Blob([res.data], {type: 'text/html'});
            element.href = URL.createObjectURL(file);
            setKronaList(element.href);
          }else{
            console.log('error')
          }
        })
    };
    const to_jb2 = () => {
      const cachedValue = localStorage.getItem('click_data');
        if (cachedValue) {
          setCachedData(cachedValue);
        }
        const queryParams = new URLSearchParams({ kronaSpecise: cachedValue });
        history.push(`/jbrowse?${queryParams.toString()}`);
        
        
    }
    return (
    <>
    <Button onClick={showModal}  className='ant-btn'>Open Modal</Button>
      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} 
      cancelButtonProps={{ style: { display: "none" } }} // 隐藏取消按钮
      okButtonProps={{ style: { display: "none" } }} // 隐藏确认按钮
      >
      <Spin spinning={loading}>  
      <Form
            name="validate_other"
            {...formItemLayout}
            onFinish={onFinish}
            style={{
              maxWidth: 600,
            }}
          >
            <Form.Item label="Dragger">
              <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                <Upload.Dragger name="files" action="/upload.do" >
                  <p className="ant-upload-drag-icon">
                    <InboxOutlined />
                  </p>
                  <p className="ant-upload-text">Click or drag file to this area to upload</p>
                </Upload.Dragger>
              </Form.Item>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                span: 12,
                offset: 6,
              }}
            >
              <Button type="primary" htmlType="submit" >
                Submit
              </Button>
            </Form.Item>
        </Form></Spin>
      </Modal>
    <div>
    <Button onClick={to_jb2} className='ant-btn'>go to JB2</Button>
      {/* <iframe id="my-element" className='frame_style' src={kronaList} width="100%"  height='500px'/> */}
      
      <iframe id="myFrame" className='frame_style' src="/text.krona.html"  width="100%"  height='900px'/>
    </div>
    </>
  )};

export default App;
